{% load static %}
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" type="text/css" href="{% static '/css/login.css' %}">
    <script src="/static/js/jquery-1.11.3/jquery.min.js"></script>

</head>

<body bgcolor="#EEE">
<div id="content">
    <form action="{% url 'App:register' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="box">

            <div id="tittle"><h1 align="center">注册页</h1></div>
            <div class="input_box">
                用户名： <input name="uname" type="text" id="username" placeholder="请输入您的昵称">
            </div>
            <div class="input_box">
                密码： <input id="upassword" name="upassword" type="password" placeholder="至少６位以字母开头的数字结合">
            </div>
            <div class="input_box">
                确认密码： <input id="upass1" name="upass1" type="password" placeholder="请再次输入密码">
            </div>
            <div class="input_box">
                手机号： <input name="uphone" type="text" placeholder="请输入您的手机号">
            </div>
            <div class="input_box">
                头像： <input name="uphoto" type="file">
            </div>

            <div id="error_box">
                <span id="error"></span>
                <br>
            </div>
            <div class="button">
                <button>立即注册</button>
            </div>
            <div class="input_tep last">
                <h4 align="center"><a href="{% url 'App:login' %}">已有账号请登录</a></h4>
            </div>

        </div>
    </form>
</div>

<script>

    $(function () {
        $('#error').html(' ')
    })

    {#    得到焦点#}
    $('#username').focus(function () {
        this.value = ''
        $('#error').html(' ')

    })

    {#    得到上方的用户名#}
    $('#username').blur(function () {
        userdata = $('#username').val()
        {#console.log(userdata)#}
        {#验证#}
        $.get('{% url "App:check_username" %}', {'uname': userdata}, function (data) {
            $('#error').html(data.msg)

        }, 'json')
    })

    {#    判断密码#}
    $('#upassword').focus(function () {
        {#console.log('---')#}
        this.value = ''
        $('#error').html(' ')
    })

    $('#upass1').focus(function () {
        this.value = ''
        $('#error').html(' ')
    })

    $('#upassword').blur(function () {
        userpwd1 = $('#upassword').val()
        console.log(userpwd1)

        $.get('{% url "App:check_password" %}', {'userpwd': userpwd1}, function (data) {
            {#console.log(data)#}
            $('#error').html(data.msg)
        }, 'json')
    })

    $('#upass1').focus(function () {
        this.value = ''
        $('#error').html = ' '
    })

    var upwd = $('#upassword').val()
    console.log(typeof (upwd))

    $('#upass1').blur(function () {
        upwd = $('#upassword').val()
         upass1 = $('#upass1').val()
        console.log(upass1)
        console.log(typeof (upass1))
        if (upwd != upass1) {
            $('#error').html('密码不一致，请重新输入')
        } else {
            $('#error').html('密码一致')
        }
    })

</script>

</body>
</html>
